import React from 'react';
import { Card, Button, Tree } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
// 部署拓扑组件
const DeploymentTopologySection = ({ deployedTemplates, onAddProcess, removeTemplate, error }) => {
  const generateTreeData = () => {
    return deployedTemplates.map(template => ({
      title: (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span>{template.templateName}(ID:{template.templateId})</span>
          <DeleteOutlined
            style={{ color: '#ff4d4f', cursor: 'pointer' }}
            onClick={(e) => {
              e.stopPropagation();
              removeTemplate(template.key);
            }}
          />
        </div>
      ),
      key: `template-${template.key}`,
      children: template.clusterTemplates ? template.clusterTemplates.map(cluster => ({
        title: cluster.name,
        key: `cluster-${cluster.key}`,
        children: cluster.moduleTemplates ? cluster.moduleTemplates.map(module => ({
          title: module.name,
          key: `module-${module.key}`,
          isLeaf: true
        })) : []
      })) : []
    }));
  };

  return (
    <div className="section">
      <div className="section-header">
        <h3 className="section-title">部署拓扑</h3>
      </div>
      <Card className="topology-card">
        {deployedTemplates.length > 0 ? (
          <div className="tree-container">
            <Tree defaultExpandAll showLine treeData={generateTreeData()} />
          </div>
        ) : (
          <div className="empty-topology">
            <p>暂无数据</p>
            <Button type="primary" icon={<PlusOutlined />} onClick={onAddProcess}>
              添加业务模板
            </Button>
          </div>
        )}
        {error && (
          <div className="error-text" style={{ color: '#ff4d4f', marginTop: 8 }}>
            {error}
          </div>
        )}
      </Card>
    </div>
  );
};

export default DeploymentTopologySection;